<template>
  <div class="page-header-index-wide" style="max-width: 1200px; margin: 0 auto">
    <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ width: '100%' }">
      <div class="account-settings-info-main" :class="{ mobile: isMobile }" :style="{ width: '100%' }">
        <a-tabs default-active-key="1" tab-position="left" :style="{ width: '100%' }">
          <a-tab-pane key="1" tab="基本设置">
            <div class="account-settings-info-title">
              <span>基本设置</span>
            </div>
            <div class="account-settings-info-view">
              <a-row :gutter="12" type="flex" justify="center">
                <a-col :order="isMobile ? 2 : 1" :xl="16" :lg="24" :md="24" :sm="24" :xs="24">
                  <a-form layout="vertical">
                    <a-form-item label="所在单位">
                      <a-input disabled placeholder="请输入您的昵称！" v-model="currentUser.orgName"/>
                    </a-form-item>

                    <a-form-item label="昵称">
                      <a-input placeholder="请输入您的昵称！" v-model="currentUser.nickname"/>
                    </a-form-item>

                    <a-form-item label="邮箱" :required="false">
                      <a-input placeholder="请输入您的邮箱！" v-model="currentUser.email"/>
                    </a-form-item>

                    <a-form-item label="家庭住址">
                      <a-textarea rows="4" placeholder="请输入您的住址！" v-model="currentUser.address"/>
                    </a-form-item>

                    <a-form-item>
                      <a-button type="primary" @click="updateBasic">更新基本信息</a-button>
                    </a-form-item>
                  </a-form>
                </a-col>
                <a-col :order="1" :xl="8" :lg="24" :md="24" :sm="24" :xs="24">
<!--                  <div class="ant-upload-preview" @click="$refs.modal.edit(1)">-->
<!--                    <a-icon type="cloud-upload-o" class="upload-icon" />-->
<!--                    <div class="mask">-->
<!--                      <a-icon type="plus" />-->
<!--                    </div>-->
<!--                    <img :src="option.img" />-->
<!--                  </div>-->
                </a-col>
              </a-row>

              <avatar-modal ref="modal" @ok="setavatar" />
            </div>
          </a-tab-pane>
          <a-tab-pane key="2" tab="安全设置">
            <div class="account-settings-info-title">
              <span>安全设置</span>
            </div>
<!--            {{securityData}}-->
            <a-list itemLayout="horizontal" :dataSource="securityData">
              <a-list-item slot="renderItem" slot-scope="item, index" :key="index">
                <a-list-item-meta>
                  <a slot="title">{{ item.title }}</a>
                  <span slot="description">
                    <span class="security-list-description">{{ item.description }}</span>
                    <span v-if="item.value"> : {{ item.value }}</span>
                  </span>
                </a-list-item-meta>
                <template v-if="item.actions">
                  <a slot="actions" @click="item.actions.callback(index)">{{ item.actions.title }}</a>
                </template>
              </a-list-item>
            </a-list>
          </a-tab-pane>
          <a-tab-pane key="3" tab="消息通知">
            <div class="account-settings-info-title">
              <span>消息通知</span>
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <a-modal :width="300"  v-model="visible" title="修改密码" @ok="handleOk">
      <div class="list">
        <a-input   placeholder="请输入新的手机号" v-model="newtel" />
        <a-button @click="send" class="button" type="primary" :loading="loading">
          发送
        </a-button>
      </div>
      <div class="yzm-code">
        <a-input v-model="captcha"  placeholder="请输入短信验证码"/>
      </div>
    </a-modal>
    <a-modal :width="300"  v-model="visible02" title="修改账号密码" @ok="handleOk02">
      <div class="list">
        <a-input   placeholder="请输输入原始密码" v-model="oldPwd" />
      </div>
      <div class="yzm-code">
        <a-input  placeholder="请输输入新密码" v-model="newpassword1"/>
      </div>
      <div class="yzm-code">
        <a-input  placeholder="请输再次输入新密码" v-model="newpassword2"/>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { RouteView } from '@/layouts'
import { baseMixin } from '@/store/app-mixin'
import AvatarModal from './AvatarModal'
import store from '@/store'

export default {
  components: {
    RouteView,
    AvatarModal,
  },
  mixins: [baseMixin],
  data() {
    return {
      loading:false,
      visible:false,
      visible02:false,
      newpassword1:'',
      newpassword2:'',
      oldPwd:'',
      captcha:'',//
      captchaToken:'',
      newtel:'',
      currentUser: {},
      preview: {},
      option: {
        img: '/avatar2.jpg',
        info: true,
        size: 1,
        outputType: 'jpeg',
        canScale: false,
        autoCrop: true,
        // 只有自动截图开启 宽度高度才生效
        autoCropWidth: 180,
        autoCropHeight: 180,
        fixedBox: true,
        // 开启宽度和高度比例
        fixed: true,
        fixedNumber: [1, 1],
      },
      securityData: [
        {
          title: '账户密码',
          description: '当前密码强度',
          value: '强',
          actions: {
            title: '修改',
            callback: () => {
              // this.$message.info('This is a normal message')
              this.visible02=true;
            },
          },
        },
        {
          title: '密保手机',
          description: '已绑定手机',
          value: '138****8293',
          actions: {
            title: '修改',
            callback: () => {
              // this.$message.success('This is a message of success')
              this.visible=true;
            },
          },
        },
      ],
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init(){
      let userInfo = store.getters.userInfo
      //  设置当前用户信息
      this.currentUser = userInfo;
      //  设置用户密码强度
      let pwdStrong = '弱'
      if(userInfo.pwdScore && userInfo.pwdScore > 2 && userInfo.pwdScore <= 3){
        pwdStrong = '中等'
      }else if(userInfo.pwdScore && userInfo.pwdScore > 3 ){
        pwdStrong = '强'
      }
      this.securityData[0].value = pwdStrong;
      //  设置用户手机号
      this.securityData[1].value = userInfo.phone;
    },
    checkPhone(tel){
      if(!(/^1[3456789]\d{9}$/.test(tel))){
        // alert("手机号码有误，请重填");
        return false;
      }
      return  true;
    },
   async send(){
      console.log(this.newtel,this.checkPhone(this.newtel),'===this')
       if(!this.checkPhone(this.newtel)){
         this.$message.error('请输入正确格式的手机号码！')
         return
       }
       this.loading=true;
       let res = await  this.$http.post('web/account/sendResetPhoneCaptcha',{"phone":this.newtel})
       this.loading=false;
       if(_.get(res,'code')==0){
         this.captchaToken=_.get(res,'data');
       }else if(_.get(res,'code')==11002){
         this.$message.info(_.get(res,'message')||'验证码已发送，请勿重新发送！')
       }else{
         this.$message.error('验证码发送失败')
       }
    },
   async handleOk(){
      if(!this.captchaToken){
        this.$message.error('请重新发送短信！')
        return
      }
      if(!this.captcha){
        this.$message.error('请输入验证码！')
        return
      }
      let res = await  this.$http.post('web/account/updatePhone',{"phone":this.newtel,captcha:this.captcha,captchaToken:this.captchaToken})

     if(_.get(res,'code')==0){
        this.$message.success(_.get(res,'message')||'密码修改成功！')
        this.visible=false;
       this.getOrgTree()
       this.queryOrgParam()
        this.init();
      } else{
        this.$message.error(_.get(res,'message')||'密码修改失败！')
      }
   },
    async handleOk02(){
      if(this.oldPwd.length<6){
        this.$message.error('请正确的输入原始密码！')
        return
      }
      if(this.newpassword1.length<6){
        this.$message.error('密码长度不能小于6位！')
        return
      }
      if(this.newpassword1!==this.newpassword2){
        this.$message.error('两次输入的密码不相等！')
        return
      }
      let res = await  this.$http.post('web/account/resetPwd',{newPwd:this.newpassword1,oldPwd:this.oldPwd})

      if(_.get(res,'code')==0){
        this.visible02=false;
        this.$message.success(_.get(res,'message')||'密码修改成功！');
        this.getOrgTree()
        this.queryOrgParam()
        this.init();

      } else{
        this.$message.error(_.get(res,'message')||'密码修改失败！')
      }
    },
    setavatar(url) {
      this.option.img = url
    },
    updateBasic(){
      let param = this.currentUser;
      this.$http.post('/web/account/updateBasic',param).then((res) => {
        if (res.code == 0) {
            this.$notification['success']({
              message: '成功',
              description: `基本信息修改成功`,
            })
            this.orgOperType = ''
            this.getOrgTree()
            this.queryOrgParam()
          } else {
            this.$notification['error']({
              message: '错误',
              description: res.message,
              duration: 4,
            })
          }
      })
    }
  },
}
</script>

<style lang="less" scoped>
.list{
  display: flex;
  .button{
    margin-left: 10px;
  }

}
.yzm-code{
  margin-top: 20px;
}
.account-settings-info-main {
  width: 100%;
  display: flex;
  height: 100%;
  overflow: auto;

  &.mobile {
    display: block;

    .account-settings-info-left {
      border-right: unset;
      border-bottom: 1px solid #e8e8e8;
      width: 100%;
      height: 50px;
      overflow-x: auto;
      overflow-y: scroll;
    }
  }

  .account-settings-info-left {
    border-right: 1px solid #e8e8e8;
    width: 224px;
  }

  .account-settings-info-title {
    color: rgba(0, 0, 0, 0.85);
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
    margin-bottom: 12px;
  }
  .account-settings-info-view {
    padding-top: 12px;
  }
}

.avatar-upload-wrapper {
  height: 200px;
  width: 100%;
}

.ant-upload-preview {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 180px;
  border-radius: 50%;
  box-shadow: 0 0 4px #ccc;

  .upload-icon {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 1.4rem;
    padding: 0.5rem;
    background: rgba(222, 221, 221, 0.7);
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, 0.2);
  }
  .mask {
    opacity: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: opacity 0.4s;

    &:hover {
      opacity: 1;
    }

    i {
      font-size: 2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -1rem;
      margin-top: -1rem;
      color: #d6d6d6;
    }
  }

  img,
  .mask {
    width: 100%;
    max-width: 180px;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
  }
}
.page-header-index-wide .ant-card-body .account-settings-info-main{
  min-height:800px;
}
</style>
